src/components/atoms/CustomButton/_CustomButton.scss (1)

20-42: Prefer responsive mixins over hardcoded media queries.

The responsive styling is logically sound, but the file imports _general_styling.scss which provides reusable responsive mixins (@mixin on-tablet, @mixin on-mobile) that match these exact breakpoints. Using the mixins would improve maintainability and reduce duplication across the codebase.

Consider refactoring to use:

@include on-tablet {
  .CustomButton {
    height: 45px;
    // ...
  }
}

@include on-mobile {
  .CustomButton {
    height: 40px;
    // ...
  }
}

This pattern is consistent with the responsive design system introduced in this PR.

src/components/molecules/BuySellCoin/_BuySellCoin.scss (1)

51-92: Font sizes may be too small on smallest viewport; verify readability.

The responsive scaling down to 10px (AdditionalInfo at line 88) on the smallest breakpoint (425px) may impact legibility. While the PR aims to fit content on mobile, ensure that at least 12px (or your minimum accessibility standard) is maintained for body text.

Additionally, as with other component files, consider using the responsive mixins (@mixin on-tablet, @mixin on-mobile) rather than hardcoded media queries for consistency with the new responsive design system.

src/components/molecules/BuySellButton/BuySellButton.scss (1)

33-64: Responsive scaling is well-designed; align with responsive mixins system.

The progressive responsive adjustments across three breakpoints (768px, 600px, 425px) are logically sound and follow a consistent pattern. However:

1. The 600px breakpoint is a custom addition not part of the standardized breakpoint set in _general_styling.scss ($breakpoint-md is 600px but the mixins may not clearly map to this). Consider whether this should use a named mixin for clarity.

2. Continue using @mixin on-tablet, @mixin on-tablet-sm, and @mixin on-mobile instead of hardcoded media queries for consistency.

src/App.scss (1)

334-417: Mobile header implementation is well-structured; verify z-index and positioning.

The mobile header implementation introduces a sophisticated z-index hierarchy (1000, 1001, 1003) for stacking the dropdown, header, and icons. The structure appears correct:

• .menu-mobile-dropdown: z-index 1000 (overlay)
• .ant-layout-header.header-desktop: hidden at 600px
• .header-mobile: z-index 1001 (header layer)
• Logo/icons: z-index 1003 (above dropdown)

However, verify the following:

1. Positioning brittleness: The dropdown's fixed top position (72px at 600px breakpoint, 62px at 425px) assumes a specific header height. If header padding changes, the dropdown position becomes misaligned. Consider using JavaScript to calculate the offset dynamically or using a more flexible approach (e.g., CSS custom properties).

2. Responsive mixins: Continue using @mixin on-tablet-sm and @mixin on-mobile for consistency instead of hardcoded media queries.

src/scss/_general_styling.scss (1)

16-52: Excellent responsive design system foundation.

The breakpoint variables and responsive mixins are well-structured and provide a solid foundation for responsive design. The five breakpoints cover the typical responsive spectrum (mobile, tablet, desktop, large desktop), and the naming convention is clear and intuitive.

However, note: While this system is defined here, the component files across the PR (CustomButton, BuySellCoin, MetamaskStatusButton, BuySellButton, and App.scss) all use hardcoded @media queries instead of the provided mixins. This creates a "defined but underutilized" pattern.

Recommendation: In follow-up PRs, refactor component files to use these mixins consistently (e.g., @include on-mobile { ... } instead of @media (max-width: 425px) { ... }). This will improve maintainability and ensure breakpoints are centrally managed.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro